window.onload = function(){
    function $(selector) {
        var dom = document.querySelectorAll(selector);
        if (dom.length == 1) {
            return dom[0];
        }
    
        return dom;
    }
    
    // 获取相关对象
    var bannerImgs = $(".bannerImgs");
    // 获取.bannerImgs层的宽度
    var bannerImgsWidth = bannerImgs.offsetWidth;
    
    var bannerImgsUl = $(".bannerImgs ul");
    
    // 所有小圆点
    var circleLis = $(".dot ol li");
    
    // 定义一个变量,实现开关灯逻辑
    var flag = true;
    
    // 定义一个全局变量currentIndex,保存当前轮播图片的索引号
    var currentIndex = 1;
    // 默认显示第1张图片
    bannerImgsUl.style.transform = `translateX( -${bannerImgsWidth * currentIndex}px)`;
    
    // 高亮小圆点的序号
    var circleIndex = 0;
    
    
    // 需求
    // 功能1: 滑动图片一次让图片滚动一张,回弹处理
    //左滑
    var startX = 0;
    $(".bannerImgs").ontouchstart = function (e) {
        //停止轮播图
        stopPlay();
        startX = e.targetTouches[0].pageX;
        // console.log(startX);
        $(".bannerImgs").ontouchmove = function (event) {
            var moveX = event.targetTouches[0].pageX;
            // console.log(moveX);
            // 位移手滑过的距离
            if (moveX < startX) {
                bannerImgsUl.style.transform = `translateX( -${bannerImgsWidth * currentIndex + startX - moveX}px)`;
                //解决二次移动过度缓慢问题
                bannerImgsUl.style.transition = "none";
            }
            else {
                bannerImgsUl.style.transform = `translateX( -${bannerImgsWidth * currentIndex + startX - moveX}px)`;
                bannerImgsUl.style.transition = "none";
            }
        }
    }
    $(".bannerImgs").ontouchend = function (e) {
        var endX = e.changedTouches[0].pageX;
        var spaceX = (endX - startX) / bannerImgsWidth;
        // 左滑超过图片层的的20%,左滑一张图
        if (spaceX < -0.2) {
            // 自加1
            currentIndex++;
            //小圆点加1
            circleIndex++;
            // 位移
            bannerImgsUl.style.transform = `translateX( -${bannerImgsWidth * currentIndex}px)`;
            // 过渡
            bannerImgsUl.style.transition = "transform 1s";
            // 小圆点变化
            if (circleIndex >= 4) {
                circleIndex = 0;
            }
    
            // 排他
            for (var i = 0; i < circleLis.length; i++) {
                circleLis[i].classList.remove("active");
            }
            // 当前高亮
            circleLis[circleIndex].classList.add("active");
        }
        // 右滑超过图片层的的20%,右滑一张图
        else if (spaceX > 0.2) {
            // 自减1
            currentIndex--;
            //小圆点减1
            circleIndex--;
            // 位移
            bannerImgsUl.style.transform = `translateX( -${bannerImgsWidth * currentIndex}px)`;
            // 过渡
            bannerImgsUl.style.transition = "transform 1s";
            // 小圆点变化
            if (circleIndex <= -1) {
                circleIndex = 3;
            }
    
            // 排他
            for (var i = 0; i < circleLis.length; i++) {
                circleLis[i].classList.remove("active");
            }
            // 当前高亮
            circleLis[circleIndex].classList.add("active");
        }
        //未超过回到原来的位置
        else {
            bannerImgsUl.style.transform = `translateX( -${bannerImgsWidth * currentIndex}px)`;
        }
        autoPlay();
    }
    // }
    
    
    
    // 给bannerImgsUl绑定过渡完成事件
    bannerImgsUl.ontransitionend = function () {
        if (currentIndex >= 5) {
            // 不做过渡,回到图片1
            bannerImgsUl.style.transition = "none";
    
            // 设置currentIndex = 1
            currentIndex = 1;
            bannerImgsUl.style.transform = `translateX( -${bannerImgsWidth * currentIndex}px)`;
        } else if (currentIndex <= 0) {
            // 不做过渡,回到图片5
            bannerImgsUl.style.transition = "none";
    
            // 设置currentIndex = 5
            currentIndex = 4;
            bannerImgsUl.style.transform = `translateX( -${bannerImgsWidth * currentIndex}px)`;
        }
    
        // 修改flag为true
        flag = true;
    }
    
    // 功能4: 被点击小圆圈高亮,并且滚动到对应图片
    for (var i = 0; i < circleLis.length; i++) {
        // circleLis[i].setAttribute("data-index" , i );
    
    
        // HTML5可以把data-开头的自定义属性放在dom对象.dataset属性中
        circleLis[i].dataset.index = i + 1;
    
        circleLis[i].onclick = function () {
            // 排他
            for (var j = 0; j < circleLis.length; j++) {
                circleLis[j].classList.remove("active");
            }
    
            // 当前高亮
            this.classList.add("active");
    
            // 获取当前小圆点身上的data-index
            // var dataIndex = this.getAttribute("data-index");
    
            var dataIndex = Number(this.dataset.index);
    
            // 位移
            bannerImgsUl.style.transform = `translateX( -${bannerImgsWidth * dataIndex}px)`;
            // 过渡
            bannerImgsUl.style.transition = "transform 1s";
    
            // 功能5: 点击某个小圆圈,再点击左侧按钮或右侧按钮,解决图片跟小圆点对应不上问题
            // 告诉currentIndex和circleIndex现在的值是多少
            currentIndex = dataIndex;
            circleIndex = dataIndex - 1;
        }
    }
    // 功能6: 自动播放功能(鼠标移上轮播图层以后停止定时器,鼠标移出轮播图层以后重新开启定时器)
    
    var timer = null;
    
    // 自动轮播的函数
    function autoPlay() {
        if (timer === null) {
            timer = setInterval(function () {
                // 手动触发右侧按钮的点击 dom对象.on事件类型();
                // 自加1
                currentIndex++;
                //小圆点加1
                circleIndex++;
                // 位移
                bannerImgsUl.style.transform = `translateX( -${bannerImgsWidth * currentIndex}px)`;
                // 过渡
                bannerImgsUl.style.transition = "transform 1s";
                // 小圆点变化
                if (circleIndex >= 4) {
                    circleIndex = 0;
                }
    
                // 排他
                for (var i = 0; i < circleLis.length; i++) {
                    circleLis[i].classList.remove("active");
                }
                // 当前高亮
                circleLis[circleIndex].classList.add("active");
            }, 2000);
        }
    }
    
    autoPlay();
    
    // 停止自动轮播的函数
    function stopPlay() {
        window.clearInterval(timer);
        timer = null;
    }
    
    // 功能7: 防止轮播图左右按钮连续点击造成播放过快,添加节流阀功能


    //滚动搜索框渐变
    
    window.onscroll = function(){
        h = window.pageYOffset;
        console.log(h);
        
        
        if(h > 0){
           $(".bg").style.opacity = 1;
           $(".bg").style.transition = "opacity 2s";
           $(".my").style.color = 'black';
           $(".my").style.background= "url(./images/home-common.png) no-repeat -0.03rem -5.23rem/1.4rem 8.2rem";
            $(".searchBox").style.border = "1px solid gray";

        }
        else if(h == 0){
            $(".bg").style.opacity = 0;
           $(".bg").style.transition = "opacity 2s";
           $(".my").style.color = 'white';
           $(".my").style.background= "url(./images/home-common.png) no-repeat -0.03rem -2.43rem/1.4rem 8.2rem";
           $(".searchBox").style.border = "none";

        }
    }
 
        
/*     function change(){     
        // 这里的html字体大小利用了一个简单书序公式（十字相乘），当我们默认设置以屏幕320px位基准此时的字体大小为20px(320    20px),那么浏览器窗口大小改变的时候新的html的fontSize（clientWidth  新的值）就是clientWidth*20/320
        document.documentElement.style.fontSize = document.documentElement.clientWidth*30/750 + 'px';  
    }
    change();      
    // 监听窗口大小发生改变时
    window.addEventListener('resize',change,false); */
}
